<template>
  <view class="ltr">
    <view :style="{marginTop: systemInfo.statusBarHeight + 'px', height: '80rpx'}"/>
    <view
        :class="['nav-bar', isScrolled ? 'scrolled' : '']"
        :style="{paddingTop: systemInfo.statusBarHeight +10+ 'px', background: isScrolled ? '' : navbarColor, zIndex: 999}">
      <!-- 返回icon -->
      <u-icon v-if="isBackIcon" @click="onBack" name="arrow-left" :color="iconColor" size="44rpx"/>
      <view v-if="!isBackIcon && isHome">
        <switch-lang/>
      </view>
      <view v-if="!isBackIcon && !isHome" style="width: 50rpx"/>

      <!-- 页面名称 -->
      <view :class="['page-name',locale]" :style="{color: titleColor}">{{ pageTitle }}</view>
      <view :style="{width: isHome ? '160rpx' : '50rpx'}"/>
    </view>
  </view>
</template>
<script lang="ts">
import {mapState} from "vuex";
import Vue from "vue";
import SwitchLang from "@/components/switch-lang/switch-lang.vue";

export default Vue.extend({
  name: 'nav-bar',
  components: {SwitchLang},
  props: {
    pageTitle: {
      type: String,
      default: '页面'
    },
    navbarColor: {
      type: String,
      default: '#F3F5F9'
    },
    titleColor: {
      type: String,
      default: '#333'
    },
    iconColor: {
      type: String,
      default: '#333'
    },
    isScrolled: {
      type: Boolean,
      default: false
    },
    isBackIcon: {
      type: Boolean,
      default: true
    },
    isHome: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    ...mapState(["systemInfo"]),
  },
  methods: {
    onBack() {
      uni.navigateBack()
      this.$emit('onBack')
    }
  }
})
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  position: fixed;
  transition: all 0.3s ease;

  &.scrolled {
    background: rgba(243, 245, 249, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px)
  }

  .page-name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 34rpx;
  }
}
</style>